<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>1_class样式绑定</title>
        <style>
            #demo{
                width: 100%;
                height: 800px;
            }
			.basic{
				width: 400px;
				height: 100px;
                line-height: 100px;
                text-align: center;
                margin-bottom: 20px;
				border: 1px solid rgb(75, 36, 36);
			}
			
			/* 三种心情，三选一 */
			.happy{
				border: 4px solid rgb(167, 87, 87);;
				background-color: rgba(226, 226, 139, 0.644);
				background: linear-gradient(30deg,rgb(212, 212, 133),rgb(219, 135, 152),rgb(136, 113, 70),rgb(240, 240, 153));
			}
			.sad{
				border: 4px dashed rgb(114, 98, 98);
				background-color: rgb(221, 170, 170);
			}
			.normal{
				border: 4px solid rgb(88, 146, 165);
				background-color: rgb(162, 208, 226);
			}
			
			/* 三个样式，随意选择，可以同时存在 */
			.atguigu1{
				background-color: yellowgreen;
			}
			.atguigu2{
				font-size: 18px;
				text-shadow:2px 2px 10px red;
			}
			.atguigu3{
				border-radius: 20px;
			}
		</style>
        <script type="text/javascript" src="../js/vue.js"></script>
    </head>
    <body>
        <div id="demo">
            <h2>字符串写法</h2>
            <hr>
            <div class="basic" :class="str">我在时光斑驳深处，聆听到花开的声音。</div>
            <button @click="changeMood">切换心情</button>
            <hr>
            <h2>对象写法</h2>
            <hr>
            <div class="basic" :class="obj">胆小鬼连幸福都害怕，碰到棉花都会受伤.</div>
            <button @click="obj.atguigu1 = !obj.atguigu1">应用 or 取消 atguigu1</button>
            <button @click="obj.atguigu2 = !obj.atguigu2">应用 or 取消 atguigu2</button>
            <button @click="obj.atguigu3 = !obj.atguigu3">应用 or 取消 atguigu3</button>
            <hr>
            <h2>数组写法</h2>
            <hr>
            <div class="basic" :class="arr">弱小和无知不是生存的障碍，傲慢才是。</div>
            <input type="text" @keyup.enter="addClassName">
        </div>
    </body>

    <script type="text/javascript">
        Vue.config.productionTip = false;

        new Vue({
            el: '#demo',
            data: {
                str: 'happy',
                obj: {
                    atguigu1: true,
                    atguigu2: true,
                    atguigu3: true,
                },
                arr: []
            },
            methods: {
                changeMood(){
                    const moodArr = ['happy', 'sad', 'normal']
                    const index = Math.floor(Math.random()*3)
                    this.str = moodArr[index]
                },
                addClassName(event){
                    const {value} = event.target
                    this.arr.push(value)
                }
            }
        })
        
    </script>
</html>